<template>
	<view>
	<view class="center">
		<view class="logo" @tap.stop="goLogin" :style="{paddingTop: CustomBar + 'px',backgroundColor:theme}" :hover-class="!login ? 'logo-hover' : ''" id="top">
			<image class="logo-img" :src="user.avatarUrl !== undefined ? (user.avatarUrl.replace('/ctxPath/', HOST_URL)) :avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{user.userName !==undefined  ? user.userName : '您未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="!hasLogin">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom" @tap.stop="design">
				<text class="list-icon" :style="{color:theme}">&#xe60f;</text>
				<text class="list-text">帐号管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item" @tap.stop="design">
				<text class="list-icon" :style="{color:theme}">&#xe639;</text>
				<text class="list-text">新消息通知</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<button class="center-list-item border-bottom feedback" open-type="feedback">
				<text class="list-icon" :style="{color:theme}" open-type="feedback">&#xe60b;</text>
				<text class="list-text" open-type="feedback">帮助与反馈</text>
				<text class="navigat-arrow" open-type="feedback" style="float: right;">&#xe65e;</text>
			</button>
			<view class="center-list-item" @tap.stop="setting">
				<text class="list-icon" :style="{color:theme}">&#xe65f;</text>
				<text class="list-text">设置</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list" @tap.stop="version">
			<view class="center-list-item">
				<text class="list-icon" :style="{color:theme}">&#xe614;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				login: false,
				avatarUrl: "../../static/logo.png"
			}
		},
		methods: {
			...mapMutations(["setHasLogin"]),
			goLogin() {
				this.setHasLogin(false)
			},
			setting(){
				uni.navigateTo({
					url: '/pages/mine/setting',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			design(){
				uni.showToast({
					title: '正在开发中',
					icon:"none"
				});
			},
			version(){
				uni.showToast({
					title: 'v1.0.0',
					icon:"none"
				});
			}
		},
		computed:{
			...mapState(["theme", "user", "HOST_URL"]),
			
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 340upx;
		padding: 20upx;
		box-sizing: border-box;
/* 		background-image: linear-gradient(45deg, #8dc63f, #39b54a); */
		color: #ffffff;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		/* color: #4cd964; */
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	
	.feedback {
		line-height: normal;
		text-align: left;
		border:none;
		background-color: white;
		border-bottom:2px solid #eee;
	}

	.feedback {
		line-height: normal;
	}

	.feedback:after {
		top: auto;
		left: auto;
		border: none;
		transform: scale(1);
	}
</style>